<template>
	<view>
		<!-- 轮播 -->
		<swiper :indicator-dots="true" :autoplay="true">
			<block v-for="(item,index) in bannerList" :key="index">
				<swiper-item>
					<image style="width: 100%;" :src="item" mode=""></image>
				</swiper-item>
			</block>
		</swiper>
		<view class="boxTop">
			<view class="top" v-for="(item,index) in approveList" :key="index">
				<image :src="item.icon" mode="" style="width: 100rpx;height: 100rpx;"></image>
				<view class="grid-text">
					<text>{{item.title}}</text>
					<text>{{item.subTitle}}</text>
				</view>
			</view>
		</view>
		<!--  -->
		<view style="width: 100%;height: 40rpx;background: #eee;"></view>


		<!-- 常用服务 -->
		<view class="box">
			<view class="tit">
				<view class="clice"></view>
				<text>常用服务</text>
			</view>
			<view>
				<u-grid col="4">
					<u-grid-item v-for="(item,index) in routerList" :key="index">
						<navigator :url="'/pages/'+item.routeIndex+'/'+item.routeIndex">
							<image :src="item.icon" mode="" style="width: 40rpx;height: 40rpx;"></image>
							<text class="grid-text">{{item.title}}</text>
						</navigator>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
		</view>

		<!-- 其他服务 -->
		<view class="box">
			<view class="tit">
				<view class="clice" style="background: #e2ca50;"></view>
				<text>其他服务</text>
			</view>
			<view>
				<u-grid col="4">
					<u-grid-item v-for="(item,index) in otherList" :key="index">
						<image :src="item.icon" mode="" style="width: 40rpx;height: 40rpx;"></image>
						<text class="grid-text">{{item.title}}</text>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getList
	} from '@/api/api.js'

	export default {
		data() {
			return {
				bannerList: [],
				approveList: [],
				routerList: [],
				otherList: [],
				show: false,
				mode: 'date'
			}
		},
		onShow() {
			this.getLists()
		},
		methods: {
			// 获取数据
			async getLists() {
				let res = await getList()
				console.log(40, res)
				let aa
				this.bannerList = res.result.config.forEach(item => {
					aa = item.carouselImgJson
				})
				this.bannerList = aa.split(",")
				console.log(this.bannerList)

				this.approveList = res.result.route.filter(item => {
					return item.type == "approve"
				})
				this.routerList = res.result.route.filter(item => {
					return item.type == "common"
				})
				this.otherList = res.result.route.filter(item => {
					return item.type == "other"
				})
			},
			// 跳转
			// go(title) {
			// 	if (title == "请假申请") {
			// 		uni.navigateTo({
			// 			url: "/pages/leave/leave"
			// 		})
			// 	} else if (title == "日程") {
			// 		uni.navigateTo({
			// 			url: "/pages/plan/plan"
			// 		})
			// 	}
			// }
		}
	}
</script>

<style lang="scss">
	swiper {
		width: 100%;
		height: 410rpx;
	}

	.boxTop {
		display: flex;
		box-sizing: border-box;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		background: #fff;
		box-shadow: 0 3rpx 5rpx rgba($color: #ccc, $alpha: .5);

		.top {
			padding: 20rpx 20rpx;
			display: flex;
			justify-content: center;
			width: 100%;

			.grid-text {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 10rpx;
			}
		}
	}

	.box {
		width: 100%;
		background: #fff;

		.tit {
			width: 100%;
			padding: 20rpx 20rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #eee;

			.clice {
				width: 18rpx;
				height: 18rpx;
				border-radius: 50%;
				background: #007AFF;
				margin-right: 10rpx;
			}
		}

		.grid-text {
			margin-top: 20rpx;
			font-size: 26rpx;
		}
		navigator{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
</style>
